<template>
	<el-container class="container">
		<!--头部-->
		<el-header :span="24"><router-view name="top"></router-view></el-header>
		<el-container :span="24" class="main">
			<!-- <el-aside> -->
			<!--左侧导航-->
			<router-view name="aside"></router-view>

			<!-- </el-aside> -->
			<el-main>
				<!--右侧内容区-->
				<section class="content-container">
					<!-- <el-tabs
						v-model="$store.state.activeIndex"
						type="border-card"
						closable
						v-if="$store.state.openTab.length"
						@tab-click="tabClick"
						@tab-remove="tabRemove"
					> -->
					<!-- 获取vuex中的openTab数组数据，循环展示 -->
					<!-- <el-tab-pane
							:key="index"
							v-for="(item, index) in $store.state.openTab"
							:label="item.name"
							:name="item.route"
						> -->
					<!-- <div class="content-wrap" style="height:100%">
               展示路由内容 
              <router-view/>
            </div> -->
					<!-- </el-tab-pane>
					</el-tabs> -->
					<div class="grid-content bg-purple-light">
						<transition name="fade" mode="out-in">
							<router-view></router-view>
						</transition>
					</div>
				</section>
			</el-main>
		</el-container>
	</el-container>
</template>
<script>
export default {
	name: 'home',
	data() {
		return {}
	}, //监听属性 类似于data概念
	computed: {},
	//监控data中的数据变化
	watch: {
		$route(to, from) {
			//判断路由是否已经打开
			//已经打开的 ，将其置为active
			//未打开的，将其放入队列里
			console.log('from', from)
			let flag = false
			for (let item of this.$store.state.openTab) {
				console.log('item.path', item.route)
				console.log('t0.path', to.path)

				if (item.route === to.path) {
					console.log('to.path', to.path)
					this.$store.commit('set_active_index', to.path)
					flag = true
					break
				}
			}
			if (!flag) {
				console.log('to.path', to.path)
				//通过路由的判断，来加入标签页的名称
				if (to.path == '/product/list/hotboom/dataCollection') {
					this.$store.commit('add_tabs', { route: to.path, name: '数据采集' })
				}
				if (to.path == '/product/list/hotboom/dataLibrary') {
					this.$store.commit('add_tabs', { route: to.path, name: '产品库' })
				}

				this.$store.commit('set_active_index', to.path)
			}
		},
	},
	//方法集合
	methods: {
		//tab标签点击时，切换相应的路由
		tabClick(tab) {
			console.log('tab', tab)
			console.log('active', this.$store.state.activeIndex)
			this.$router.push({ path: this.$store.state.activeIndex })
		},
		//移除tab标签
		tabRemove(targetName) {
			console.log('tabRemove', targetName)
			//首页不删
			if (targetName == '/index') {
				return
			}
			this.$store.commit('delete_tabs', targetName)
			if (this.$store.state.activeIndex === targetName) {
				// 设置删除后，重新激活的路径
				if (this.$store.state.openTab && this.$store.state.openTab.length >= 1) {
					console.log('=============', this.$store.state.openTab[this.$store.state.openTab.length - 1].route)
					//设置路由展示，为索引前一个路由
					this.$store.commit(
						'set_active_index',
						this.$store.state.openTab[this.$store.state.openTab.length - 1].route
					)
					//跳转路由
					this.$router.push({ path: this.$store.state.activeIndex })
				} else {
					//否则 跳转到首页
					this.$router.push({ path: '/index' })
				}
			}
		},
	},
	//生命周期 - 创建完成（可以访问当前this实例）
	created() {},
	//生命周期 - 挂载完成（可以访问DOM元素）
	mounted() {
		// 刷新时以当前路由做为tab加入tabs
		// 当前路由不是首页时，添加首页以及另一页到store里，并设置激活状态
		// 当当前路由是首页时，添加首页到store，并设置激活状态
		if (this.$route.path !== '/' && this.$route.path !== '/index') {
			this.$store.commit('add_tabs', { route: '/index', name: '首页' })
			//通过路由的判断，来加入标签页的名称
			if (this.$route.path == '/product/list/hotboom/dataCollection') {
				this.$store.commit('add_tabs', { route: this.$route.path, name: '数据采集' })
			}
			if (this.$route.path == '/product/list/hotboom/dataLibrary') {
				this.$store.commit('add_tabs', { route: this.$route.path, name: '产品库' })
			}
			this.$store.commit('set_active_index', this.$route.path)
		} else {
			console.log('2')
			this.$store.commit('add_tabs', { route: '/home/main', name: '首页' })
			this.$store.commit('set_active_index', '/home/main')
			this.$router.push('/home/main')
		}
	},
	beforeCreate() {}, //生命周期 - 创建之前
	beforeMount() {}, //生命周期 - 挂载之前
	beforeUpdate() {}, //生命周期 - 更新之前
	updated() {}, //生命周期 - 更新之后
	beforeDestroy() {}, //生命周期 - 销毁之前
	destroyed() {}, //生命周期 - 销毁完成
	activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
.content-container {
	flex: 1;
}
.el-header {
	padding: 0;
}
.el-aside {
	width: auto;
}
.el-container /deep/ .el-aside {
	padding-top: 20px;
	width: auto;
}
</style>
